<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">会场列表</nut-navbar>
    <div class="container container-bg">
        <div class="input-list">
            <nut-textinput 
                v-model="reservePerson"
                label="预定客户"
                placeholder="请填写预定客户姓名"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />

            <nut-textinput 
                v-model="meetingType"
                label="会议类型 "
                placeholder="请填写业务员姓名"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />
            <nut-textinput 
                v-model="clientVocation"
                label="客户行业"
                placeholder="请填写你的其他需求"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />
            <nut-textinput 
                v-model="meetingNumber"
                label="会议人数"
                placeholder="请填写会议人数"
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />

            <label class="nut-textinput baifang" placeholder="请选择摆放形式"><span class="nut-textinput-label">摆放形式</span> 
            <select v-model="putFormlist">
                <option :value="vo.id" v-for="(vo,i) in putForm" :key="i" v-show="vo.b_type == 3">{{vo.b_name}}</option>
            </select>
             </label>

            
            <nut-textinput 
                v-model="commentinfo"
                label="备注 "
                placeholder=" "
                :clearBtn="true"
                :disabled="false"
                :hasBorder="false"
            />
        </div>
    <!-- 输入框组 -->

        <div class="schedule">
            <div class="title">选择档期</div>
            <div class="list">
                <ul>
                    <li v-for="(vo,i) in field_list" :key="i">
                        <nut-row justify="space-between">
                            <nut-col :span="5">
                                <div>{{field_title[i]}}</div>
                            </nut-col>
                            <nut-col :span="11">
                                <div>{{vo.reserveDay}}</div>
                            </nut-col>
                            <nut-col :span="5">
                                <div>{{vo.name}}</div>
                            </nut-col>
                            <nut-col :span="3">
                                <div><img @click="delList(i)" src="../../assets/icon/jian.png"></div>
                            </nut-col>
                        </nut-row>
                        
                    </li>
                </ul>
                <div class="button">
                    <button @click="goBack">添加其他场地和其他日期</button>
                </div>
            </div>
        </div> 

        <div class="reserve">
            <div class="reserve-title">预定状态</div>
            <nut-radiogroup class="" v-model="radioGroupVal1">
                <nut-radio label="1">预定</nut-radio>
                <nut-radio label="2">交订</nut-radio>
            </nut-radiogroup>
        </div>
        
        <div class="button_list">
            <nut-col class="list" :span="12">
                <button class="cancel" @click="goBack">取消预约</button>
            </nut-col>
            <nut-col class="list" :span="12">
                <button class="sumbit" @click="addData">确定提交</button>
            </nut-col>
        </div>

    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { getListApi, getDetailsByIdApi } from '../../api/schedule'
  import { IconUrl } from '../../utils/auxiliary'

  export default {
    data () {
      return { 
        reservePerson:"",
        meetingType:"",
        clientVocation:"",
        meetingNumber:"",
        putForm:[
            
        ],
        putFormlist:"",
        commentinfo:"",
        activeText:"",
        radioGroupVal1:"1",
        timetable:{
            reserve_day:[],
        },  
        field_list:[],
        field_title:[]
      }
    },

    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },

    async mounted () {
      this.duquSession();
    },
    
    methods: {
      duquSession(){
            this.timetable.reserve_day = JSON.parse(sessionStorage.getItem(1));
            this.activeText = sessionStorage.getItem(2)
            this.field_list = JSON.parse(sessionStorage.getItem(3))
            // console.log(this.timetable.reserve_day);
            console.log(this.field_list);
            this.tihuanField()
      },
      tihuanField(){
        this.field_list.forEach(item=>{
            this.$http.get(this.$url + '/inf/venue/getVenueByIdConfig',{
                params:{
                    venueId:item.venueId,
                }
            })
            .then(response => {
                this.field_title.push(response.data.venueById.venue_title);
            })
        })
        this.$http.get(this.$url + '/inf/venue/getVenueConfigDecorate',{
            
        })
        .then(response => {
            this.putForm = response.data
        })
      },
      delList(id){
        var i =0;
        for(i=0;i<this.timetable.reserve_day.length;i++){
            // console.log(this.timetable.reserve_day[i]);
            if(this.timetable.reserve_day[i].reserve_day.data == this.field_list[id].reserveDay && this.timetable.reserve_day[i].reserve_day.venueId == this.field_list[id].venueId){
                var a = 0
                for(a=0;a<this.timetable.reserve_day[i].reserve_day.list.length;a++){
                    if(this.timetable.reserve_day[i].reserve_day.list[a].screening == this.field_list[id].screening){
                        this.timetable.reserve_day[i].reserve_day.list[a].checked = false;
                    }
                }
            }
        }
        this.$delete(this.field_list,[id])
        sessionStorage.setItem(3,JSON.stringify(this.field_list)); 
        sessionStorage.setItem(4,JSON.stringify(this.timetable.reserve_day)); 
      },
      goBack(){
        this.$router.push('/theater')
      },
      addData(){
        console.log(this.timetable.reserve_day);
        if(this.reservePerson == ""){
            alert("请填写预定客户");
            return false;
        }
        if(this.field_list == ""){
            alert("您还未选择预定场地与时间");
            return false;
        }
        console.log(this.putFormlist)
        // this.$http.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';  //此处是增加的代码，设置请求头的类型
        this.$http.post(this.$url + '/inf/venue/add',{
                venueId:this.field_list[0].venueId,
                reservePerson:this.reservePerson,
                commentinfo:this.commentinfo,
                meetingType:this.meetingType,
                meetingNumber:this.meetingNumber,
                state:this.radioGroupVal1,
                clientVocation:this.clientVocation,
                salesman: this.userInfo.userId,
                putForm:this.putFormlist,
                tbVenueOrderSession:this.field_list
        })
        .then(response => {
            if(response.data.flag == "3"){
                this.$router.push('/appointment')
            }else{
                alert(response.data.msg);
            }
        })
      }
    }
  }
</script>

<style lang="scss">
  body{
    background: #F9F9F9;
  }
  .input-list{
      width: 100%;
      background: #fff;
      margin-top:1rem;
      height: auto;
      border-radius: 5px;
      padding:5px 10px;
      box-sizing: border-box;
      .nut-textinput{
          padding:5px 0;
          border-top:1px solid #ddd;
          .nut-textinput-label{
              width: 55px;
          }
      }
      .nut-textinput:nth-child(1){
          border:0;
      }
  }
  .schedule{
      background: #fff;
      margin-top:1rem;
      padding:15px;
      border-radius: 5px;
      overflow: hidden;
      .title{
          margin-bottom:10px;
          font-size: 14px;
      }
      .list{
          li{
              text-align: center;
              margin-top:15px;
              .list_option{
                  width: 100%;
                  float: left;
                  margin-top:10px;
                  font-size: 14px;
              }
              img{
                  float: right;
                  width: 15px;
                  height: 15px;
              }
          }
          .button{
              width: 100%;
              float: left;
              text-align: center;
              margin-top:1rem;
              button{
                border:0;
                background: #B29462;
                color:#fff;
                padding:7px 30px;
                border-radius: 3px;
              }
          }
      }
  }
  .reserve{
      background: #fff;
      margin-top:1rem;
      padding:15px;
      border-radius: 5px;
      overflow: hidden;
      .reserve-title{
          float: left;
          margin-right:2rem;
          font-size:14px;
      }
  }
  .button_list{
    margin-top:1rem;
    width: 100%;
    float: left;
    margin-bottom:1rem;
    .list{
        text-align: center;
    }
    .cancel{
        background: #2E2F31;
        border:0;
        color:#fff;
        padding:10px 25px;
    }
    .sumbit{
        background: #B29462;
        border:0;
        color:#fff;
        padding:10px 25px;
    }
  }
  .baifang{
      select{
          -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 40px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-size: 14px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid #DDDFE6;
            background-color: '#FFFFFF';
            padding: 0 30px 0 10px;
            border:0;
            background: #fff;
      }
  }
</style>
